:root {
  font-size: 15px;
}
@mixin position-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
body {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: grid;
  grid-template-rows: 35px auto 20vh;
  padding: 10px;
  header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-content: center;
    color: white;
    i.iconfont:nth-child(2) {
      justify-self: end;
    }
  }
  footer {
    display: grid;
    grid-template-columns: 1fr 60px;
    padding-bottom: 6rem;
    .info {
      display: grid;
      align-content: center;
      align-self: end;
      h3 {
        color: white;
        font-size: 1rem;
        span {
          font-weight: 200;
          opacity: 0.6;
        }
      }
      & > p {
        font-size: 1rem;
        color: #f3f3f3;
        margin-top: 0.5rem;
        font-weight: 200;
      }
      & > div {
        color: #fff;
        margin-top: 0.8rem;
        font-weight: 200;
        display: grid;
        grid-template-columns: 20px auto;
        p {
          font-size: 0.8rem;
        }
      }
    }
    .music {
      align-self: end;
      color: white;
      display: grid;
      position: relative;
      .icon {
        border: solid 8px #333;
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(#fff, 0.1);
        animation-name: music-rotate;
        animation-iteration-count: infinite;
        animation-duration: 3s;
        animation-timing-function: linear;
        transform-origin: center;
        z-index: 3;
        img {
          width: 100%;
        }
        @keyframes music-rotate {
          to {
            transform: rotate(360deg);
          }
        }
      }

      ul {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(50deg);
        li {
          position: absolute;
          transform-origin: -20px -40px;
          transition: 1s;
          transform: scale(0.6);
          animation-name: li-rotate;
          animation-duration: 3s;
          animation-iteration-count: infinite;
          &:nth-child(2) {
            animation-delay: 1.5s;
            transform-origin: -30px -30px;
          }
          &:nth-child(3) {
            animation-delay: 2.5s;
            transform-origin: -40px -30px;
          }
          @keyframes li-rotate {
            25% {
              opacity: 1;
            }
            to {
              transform: scale(1.8) rotate(85deg);
              opacity: 0;
            }
          }
        }
      }
    }
  }
  main {
    grid-template: repeat(4, 75px) / 50px;
    color: white;
    display: grid;
    align-content: end;
    justify-content: end;
    justify-items: center;
    align-items: center;
    .icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .xin,
    .pinglun {
      position: relative;
      i.iconfont {
        font-size: 2.5rem;
      }
      span {
        @include position-center();
        top: 45px;
      }
    }
    .more {
      i.iconfont {
        font-size: 1rem;
      }
    }
  }
  video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
}
